package com.xiaoan.wlt.controller.app;

import java.util.List;

import com.alibaba.fastjson.JSONObject;
import com.jfinal.json.Json;
import com.jfinal.plugin.activerecord.Page;
import com.xiaoan.wlt.controller.BaseController;
import com.xiaoan.wlt.model.zyk.ResourceTemplate;

public class AppController extends BaseController {

//	tab=all&page=1&limit=20
	public void index(){
		this.renderJson();
		this.setAttr("msg","我是我");
	}
	
//	author:
//		avatar_url:"https://avatars.githubusercontent.com/u/8791709?v=3&s=120"
//		loginname:"coolfishstudio"
//	author_id:"541bf9b9ad60405c1f151a03"
//	content:"<div class="markdown-text"><blockquote>↵<p>写在头部</p>↵</blockquote>↵<p>本项目写于小程序发布之初，期间小程序官方有过几次更新，例如准备移除了loading组件、改变page的默认高度等，主要看的还是博卡君的文章，后来在朋友的建议下在9月27号写了本篇文章并分享到github上，是做为微信小应用的入门教程，<strong>并非某在线学习网站499收费课程的作业</strong>，特此声明。</p>↵<blockquote>↵<p>微信应用号入门实践之cnode社区版</p>↵</blockquote>↵<p>首先感谢cnode社区提供的api，本次实现了简单的cnode社区应用号制作。↵实现了数据的读取、展示，↵实现了简单的布局，↵实现了下一页功能。</p>↵<p>放上我的github地址↵<a href="https://github.com/coolfishstudio/wechat-webapp-cnode">https://github.com/coolfishstudio/wechat-webapp-cnode</a></p>↵<p><img src="//dn-cnode.qbox.me/Fo4zG2Vfe50352POPZYXv8Ls0Jcc" alt="首页列表">↵<img src="//dn-cnode.qbox.me/Fl7TiaW13s541lHZ7Crq7NxKshqG" alt="内容详情"></p>↵<p>下面就说说我做这个的过程，不足之处，请多多指教，只愿为进步。</p>↵<h2>1.创建项目</h2>↵<p>首先，在官网下载工具，<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474887501214">下载地址</a> 我的是选择mac版本0.9.092300。</p>↵<p>然后跟着官方的<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474887501301">简版教程</a> 创建一个项目。</p>↵<h4>注：现在官方的工具支持无appid创建项目。</h4>↵<h5>1.打开开发者工具，选择“添加项目”</h5>↵<p><img src="//dn-cnode.qbox.me/FsqxRNIzNDyzItbl-vhAFPr0J5t2" alt></p>↵<h5>2.选择无appid，填写地址，创建项目</h5>↵<p><img src="//dn-cnode.qbox.me/Fp098WRAyxgJ415Dt_f0YGhjIMHr" alt></p>↵<h5>3.创建成功，看到默认的Demo项目页面</h5>↵<p><img src="//dn-cnode.qbox.me/FuvUmKfcUu8MeLc4eeuwNBfkbfMC" alt></p>↵<h2>2.配置</h2>↵<p>默认的项目里已经没有关于tabBar的配置信息，所以为了学习，我把这个配置进行了修改。</p>↵<p>首先关于配置的说明同样来自于<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=1474887501556">官方</a></p>↵<p>注意：官方的代码有些字段是不一样的，小心被坑。</p>↵<pre class="prettyprint"><code>{↵  &quot;pages&quot;:[↵    &quot;pages&#x2F;index&#x2F;index&quot;,↵    &quot;pages&#x2F;logs&#x2F;logs&quot;↵  ],↵  &quot;window&quot;:{↵    &quot;backgroundTextStyle&quot;:&quot;light&quot;,↵    &quot;navigationBarBackgroundColor&quot;: &quot;#fff&quot;,↵    &quot;navigationBarTitleText&quot;: &quot;WeChat&quot;,↵    &quot;navigationBarTextStyle&quot;:&quot;black&quot;↵  },↵  &quot;tabBar&quot;:{↵    &quot;list&quot;: [{↵      &quot;pagePath&quot;: &quot;pages&#x2F;index&#x2F;index&quot;,↵      &quot;text&quot;: &quot;首页&quot;↵    }, {↵      &quot;pagePath&quot;: &quot;pages&#x2F;logs&#x2F;logs&quot;,↵      &quot;text&quot;: &quot;日志&quot;↵    }]↵  }↵}↵↵</code></pre><p>增加了tabBar, 查看调试↵<img src="//dn-cnode.qbox.me/Fl-OboTDeCULcPbs5BiM81nj_Xrc" alt>↵看界面是如此的简陋，为此针对tabBar参考官方说明进行了简单的美化。</p>↵<pre class="prettyprint"><code> &quot;tabBar&quot;:{↵    &quot;color&quot;:&quot;#272636&quot;,↵    &quot;selectedColor&quot;:&quot;#80bd01&quot;,↵    &quot;backgroundColor&quot;:&quot;#fff&quot;,↵    &quot;borderStyle&quot;:&quot;white&quot;,↵    &quot;list&quot;:[{↵      &quot;pagePath&quot;:&quot;pages&#x2F;index&#x2F;index&quot;,↵      &quot;text&quot;:&quot;首页&quot;,↵      &quot;iconPath&quot;:&quot;images&#x2F;tabBar&#x2F;my.png&quot;,↵      &quot;selectedIconPath&quot;:&quot;images&#x2F;tabBar&#x2F;my_hl.png&quot;↵    },{↵      &quot;pagePath&quot;:&quot;pages&#x2F;index&#x2F;index&quot;,↵      &quot;text&quot;:&quot;我的&quot;,↵      &quot;iconPath&quot;:&quot;images&#x2F;tabBar&#x2F;list.png&quot;,↵      &quot;selectedIconPath&quot;:&quot;images&#x2F;tabBar&#x2F;list_hl.png&quot;↵    }]↵  }↵</code></pre><p>效果如图↵<img src="//dn-cnode.qbox.me/FjzwAq6RH5TstCXIYb5ZIt6z3cuj" alt>↵最后根据文档，对默认页面的窗口表现进行了修改</p>↵<pre class="prettyprint"><code>  &quot;window&quot;:{↵    &quot;backgroundTextStyle&quot;:&quot;black&quot;,↵    &quot;backgroundColor&quot;:&quot;#fff&quot;,↵    &quot;navigationBarBackgroundColor&quot;:&quot;#000&quot;,↵    &quot;navigationBarTitleText&quot;:&quot;CNODE 应用号版&quot;,↵    &quot;navigationBarTextStyle&quot;:&quot;white&quot;,↵    &quot;enablePullDownRefresh&quot;:&quot;true&quot;↵  },↵</code></pre><p>效果如图↵<img src="//dn-cnode.qbox.me/Fl4S7o2m50JXXt1xebSgq1pNR_iX" alt>↵整体配置文件为</p>↵<pre class="prettyprint"><code>{↵  &quot;pages&quot;:[↵    &quot;pages&#x2F;index&#x2F;index&quot;,↵    &quot;pages&#x2F;logs&#x2F;logs&quot;↵  ],↵  &quot;window&quot;:{↵    &quot;backgroundTextStyle&quot;:&quot;black&quot;,↵    &quot;backgroundColor&quot;:&quot;#fff&quot;,↵    &quot;navigationBarBackgroundColor&quot;:&quot;#000&quot;,↵    &quot;navigationBarTitleText&quot;:&quot;CNODE 应用号版&quot;,↵    &quot;navigationBarTextStyle&quot;:&quot;white&quot;,↵    &quot;enablePullDownRefresh&quot;:&quot;true&quot;↵  },↵  &quot;tabBar&quot;:{↵    &quot;color&quot;:&quot;#272636&quot;,↵    &quot;selectedColor&quot;:&quot;#80bd01&quot;,↵    &quot;backgroundColor&quot;:&quot;#fff&quot;,↵    &quot;borderStyle&quot;:&quot;white&quot;,↵    &quot;list&quot;:[{↵      &quot;pagePath&quot;:&quot;pages&#x2F;index&#x2F;index&quot;,↵      &quot;text&quot;:&quot;首页&quot;,↵      &quot;iconPath&quot;:&quot;images&#x2F;tabBar&#x2F;my.png&quot;,↵      &quot;selectedIconPath&quot;:&quot;images&#x2F;tabBar&#x2F;my_hl.png&quot;↵    },{↵      &quot;pagePath&quot;:&quot;pages&#x2F;index&#x2F;index&quot;,↵      &quot;text&quot;:&quot;我的&quot;,↵      &quot;iconPath&quot;:&quot;images&#x2F;tabBar&#x2F;list.png&quot;,↵      &quot;selectedIconPath&quot;:&quot;imag…quot;&gt;↵      &lt;view class=&quot;bar-info-item&quot;&gt;↵        &lt;image class=&quot;bar-info-item-icon&quot; src=&quot;&#x2F;images&#x2F;icon&#x2F;reply.png&quot;&gt;&lt;&#x2F;image&gt;↵        &lt;view class=&quot;bar-info-item-number&quot;&gt;{{item.reply_count}}&lt;&#x2F;view&gt;↵      &lt;&#x2F;view&gt;↵      &lt;view class=&quot;bar-info-item&quot;&gt;↵        &lt;image class=&quot;bar-info-item-icon&quot; src=&quot;&#x2F;images&#x2F;icon&#x2F;visit.png&quot;&gt;&lt;&#x2F;image&gt;↵        &lt;view class=&quot;bar-info-item-number&quot;&gt;{{item.visit_count}}&lt;&#x2F;view&gt;↵      &lt;&#x2F;view&gt;↵    &lt;&#x2F;view&gt;↵  &lt;&#x2F;view&gt;↵&lt;&#x2F;block&gt;↵</code></pre><p>附上一个没有样式的列表展现↵<img src="//dn-cnode.qbox.me/FkoTZY1Q9kqOWa1-e70FHifzHVo7" alt></p>↵<h4>3.传参，实现tab切换</h4>↵<p>根据cnode的api可以知道通过tab不同的值，获得到不同标签下的内容列表。</p>↵<p>所以 在页面的最上面 tab 栏中</p>↵<pre class="prettyprint"><code>  &lt;view class=&quot;top-bar&quot;&gt;↵    &lt;view class=&quot;top-bar-item&quot; id=&quot;all&quot; catchtap=&quot;onTapTag&quot;&gt;全部&lt;&#x2F;view&gt;↵    &lt;view class=&quot;top-bar-item&quot; id=&quot;good&quot; catchtap=&quot;onTapTag&quot;&gt;精华&lt;&#x2F;view&gt;↵    &lt;view class=&quot;top-bar-item&quot; id=&quot;share&quot; catchtap=&quot;onTapTag&quot;&gt;分享&lt;&#x2F;view&gt;↵    &lt;view class=&quot;top-bar-item&quot; id=&quot;ask&quot; catchtap=&quot;onTapTag&quot;&gt;问答&lt;&#x2F;view&gt;↵    &lt;view class=&quot;top-bar-item&quot; id=&quot;job&quot; catchtap=&quot;onTapTag&quot;&gt;招聘&lt;&#x2F;view&gt;↵  &lt;&#x2F;view&gt;↵</code></pre><p>将id进行定义，通过获取id拿到对应的tab类型。</p>↵<p>其中<code>catchtap</code>是事件绑定。</p>↵<p>bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。</p>↵<p>在topics.js获取</p>↵<pre class="prettyprint"><code>  onTapTag: function (e) {↵    var self = this;↵    var tab = e.currentTarget.id;↵    &#x2F;&#x2F; 这里就能获取到不同的tab值了↵    self.setData({↵      tab: tab↵    });↵    if (tab !== &#x27;all&#x27;) {↵      this.fetchData({tab: tab});↵    } else {↵      this.fetchData();↵    }↵  },↵</code></pre><h4>4.下一页的实现</h4>↵<p>根据文档，组件的视图容器中有<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=1474887496374">scroll-view</a>这个可滚动视图区域。</p>↵<h5>注意：使用竖向滚动时，需要给&lt;scroll-view/&gt;一个固定高度。</h5>↵<pre class="prettyprint"><code>&lt;scroll-view class=&quot;posts-list&quot; style=&quot;height:100%&quot; scroll-y=&quot;true&quot; bindscrolltolower=&quot;lower&quot;&gt;↵  &lt;block wx:for=&quot;{{postsList}}&quot;&gt;↵    ...↵  &lt;&#x2F;block&gt;↵&lt;&#x2F;scroll-view&gt;↵</code></pre><p>topics.js文件</p>↵<pre class="prettyprint"><code>  lower: function (e) {↵    var self = this;↵    &#x2F;&#x2F; 修改当前页码↵    self.setData({↵      page: self.data.page + 1↵    });↵    &#x2F;&#x2F; 判断当前页的tab值 进行请求数据↵    if (self.data.tab !== &#x27;all&#x27;) {↵      this.fetchData({tab: self.data.tab, page: self.data.page});↵    } else {↵      this.fetchData({page: self.data.page});↵    }↵  }↵</code></pre><h4>5.跳页的实现</h4>↵<p>在<code>posts-item</code>中已经进行了事件绑定。利用<code>wx.navigateTo</code>实现页面的跳转。</p>↵<h5>注意：一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。</h5>↵<pre class="prettyprint"><code>redictDetail: function (e) {↵  console.log(&#x27;我要看详情&#x27;);↵  var id = e.currentTarget.id,↵      url = &#x27;..&#x2F;detail&#x2F;detail?id=&#x27; + id;↵      &#x2F;&#x2F; 这里的detail是需要创建对应的文件，以及页面注册的↵  wx.navigateTo({↵    url: url↵  })↵},↵</code></pre><h3>4.实现详情页</h3>↵<p>同样的原理，创建detail文件，并注册，获取数据，并美化页面。↵<img src="//dn-cnode.qbox.me/FmJ5n5-t3gLCfFQTpbzIBS1_ag2L" alt></p>↵<h3>5.总结</h3>↵<ul>↵<li>微信小应用页面的脚本逻辑在是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能再脚本中使用window，也无法在脚本中操作组件</li>↵<li>同样不能用jquery</li>↵<li>也不能操作dom</li>↵<li>部分标签不支持，比如 h1-h6 会编译报错。</li>↵<li>暂时没找到解决富文本详情页显示的办法。</li>↵<li>整体下来，感觉开发简单，限制很多。</li>↵<li>写过react的看这个确实比较简单。</li>↵</ul>↵<p>放上我的github地址↵<a href="https://github.com/coolfishstudio/wechat-webapp-cnode">https://github.com/coolfishstudio/wechat-webapp-cnode</a></p>↵<p>最后感谢：cnode社区和博卡君</p>↵<p>附上 博卡君的教程</p>↵<p><a href="https://my.oschina.net/wwnick/blog/750055">全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！</a></p>↵<p><a href="https://my.oschina.net/wwnick/blog/750495">博卡君的应用号（小程序）开发教程首发第二弹！（0923）</a></p>↵<p><a href="https://my.oschina.net/wwnick/blog/750974">第三弹！全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！</a></p>↵<p><a href="https://my.oschina.net/wwnick/blog/751826">第四弹！全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！</a></p>↵<p><a href="https://my.oschina.net/wwnick/blog/752421">第五弹！全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！</a></p>↵<p><a href="https://my.oschina.net/wwnick/blog/753597">第六弹！全球首个微信小程序（应用号）开发教程！通宵吐血赶稿！</a>↵－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－↵总结一下我遇到的问题↵1.页面没有注册 那么 template 模版无法传递数据 拿不到动态数据 但是能使用wxss↵2.进度条注意右侧百分号 100%的时候 进度条缩短↵3.轮播图加上属性vertical=“vertical/horizontal” 可以修改布局方向，文档没说↵4.有关icon，文档提供默认的只有9个，实际目前测出有15个 success, info, warn, waiting, safe_success, safe_warn,success_circle, success_no_circle, waiting_circle, circle, download,info_circle, cancel, search, clear↵－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－↵鉴于有很多童鞋还不了解小应用和h5页面有什么区别↵我决定安利一下我公司的一个文章↵<a href="http://url.cn/41kcsQr">小云百科:什么是“微信小程序”</a></p>↵</div>"
//	create_at:"2016-09-27T07:53:31.872Z"
//	good:false
//	id:"57ea257b3670ca3f44c5beb6"
//	last_reply_at:"2017-01-17T03:06:12.591Z"
//	reply_count:157
//	tab:"share"
//	title:"分享我用cnode社区api做微信小应用的入门过程"
//	top:true
//	visit_count:29804
	public void topics(){
		this.renderJson();
		int page = this.getParaToInt("page");
		int limit = this.getParaToInt("limit");
		
		ResourceTemplate rt = new ResourceTemplate();
		rt.setPageNumber(page);
		rt.setPageSize(limit);
		
		List<JSONObject> p = ResourceTemplate.dao.findTojsonList(rt);
		
		this.setAttr("data", p);
	}
	
	public void topic(){
		this.renderJson();
		int id = this.getParaToInt("id");
		
		JSONObject p = ResourceTemplate.dao.findByTojson(id);
		
		this.setAttr("data", p);
	}
	
	
	public void getRes(){
		this.renderJson();
		this.setAttr("list",ResourceTemplate.dao.findTitle());
	}
	
}
